<template>
	<view class="modify-password-container">
		<!-- 页面标题 -->
		<!-- <view class="header">
			<text class="title">修改支付密码</text>
		</view> -->

		<!-- 修改表单 -->
		<view class="modify-form">
			<!-- 新密码输入 -->
			<view class="form-item">
				<view class="form-label">请输入新密码</view>
				<view class="password-input-wrapper" @click="focusNewPassword">
					<view class="password-boxes">
						<view 
							class="box" 
							v-for="(digit, index) in 6" 
							:key="index"
							:class="{ 'active': passwordFocus && index === newPassword.length }"
						>
							{{ newPassword[index] ? '●' : '' }}
						</view>
					</view>
					<!-- 修复输入框样式 -->
					<u-input 
						v-model="newPassword"
						type="number"
						maxlength="6"
						:border="false"
						:focus="passwordFocus"
						@input="onPasswordInput"
						@focus="onPasswordFocus"
						@blur="onPasswordBlur"
						class="hidden-input"
					></u-input>
				</view>
			</view>
			
			<!-- 确认密码输入 -->
			<view class="form-item">
				<view class="form-label">请再次输入新密码</view>
				<view class="password-input-wrapper" @click="focusConfirmPassword">
					<view class="password-boxes">
						<view 
							class="box" 
							v-for="(digit, index) in 6" 
							:key="index"
							:class="{ 'active': confirmFocus && index === confirmPassword.length }"
						>
							{{ confirmPassword[index] ? '●' : '' }}
						</view>
					</view>
					<u-input 
						v-model="confirmPassword"
						type="number"
						maxlength="6"
						:border="false"
						:focus="confirmFocus"
						@input="onConfirmInput"
						@focus="onConfirmFocus"
						@blur="onConfirmBlur"
						class="hidden-input"
					></u-input>
				</view>
				<view v-if="passwordError" class="error-tip">{{ passwordError }}</view>
			</view>

			<!-- 确定按钮 -->
			<view class="confirm-btn-wrapper">
				<u-button :custom-style="confirmButtonStyle" @click="confirmModify" :disabled="!canConfirm">
					确定
				</u-button>
			</view>
		</view>

		<!-- 数字键盘 -->
		<view class="keyboard-container" v-if="showKeyboard">
			<!-- 完成按钮 -->
			<view class="done-btn" @click="hideKeyboard">
				完成
			</view>

			<!-- 数字键盘 -->
			<view class="keyboard">
				<view class="key-row" v-for="(row, rowIndex) in keyboardKeys" :key="rowIndex">
					<view class="key-item" v-for="(key, keyIndex) in row" :key="keyIndex" @click="onKeyPress(key)">
						<text class="key-text">{{ key.text }}</text>
						<text v-if="key.subText" class="key-sub-text">{{ key.subText }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 密码输入
				newPassword: '',
				confirmPassword: '',
				passwordError: '',
				passwordFocus: false,
				confirmFocus: false,
				showKeyboard: false,

				// 数字键盘
				keyboardKeys: [
					[{
							text: '1'
						},
						{
							text: '2',
							subText: 'ABC'
						},
						{
							text: '3',
							subText: 'DEF'
						}
					],
					[{
							text: '4',
							subText: 'GHI'
						},
						{
							text: '5',
							subText: 'JKL'
						},
						{
							text: '6',
							subText: 'MNO'
						}
					],
					[{
							text: '7',
							subText: 'PQRS'
						},
						{
							text: '8',
							subText: 'TUV'
						},
						{
							text: '9',
							subText: 'WXYZ'
						}
					],
					[{
							text: '',
							subText: ''
						},
						{
							text: '0'
						},
						{
							text: '⌫',
							subText: ''
						}
					]
				]
			}
		},
		computed: {
			// 确定按钮样式
			confirmButtonStyle() {
				return {
					backgroundColor: this.canConfirm ? '#ff4757' : '#ccc',
					color: '#fff',
					fontSize: '32rpx',
					height: '88rpx',
					lineHeight: '88rpx',
					borderRadius: '8rpx',
					width: '100%'
				};
			},

			// 是否可以确认
			canConfirm() {
				return this.newPassword.length === 6 && this.confirmPassword.length === 6;
			}
		},
		methods: {
			// 聚焦新密码输入框
			focusNewPassword() {
				this.passwordFocus = true;
				this.confirmFocus = false;
				this.showKeyboard = true;
				// 清除错误信息
				this.passwordError = '';
			},
			
			// 聚焦确认密码输入框
			focusConfirmPassword() {
				this.confirmFocus = true;
				this.passwordFocus = false;
				this.showKeyboard = true;
				// 清除错误信息
				this.passwordError = '';
			},

			// 新密码输入处理
			onPasswordInput(value) {
				this.newPassword = value;
			},

			// 确认密码输入处理
			onConfirmInput(value) {
				this.confirmPassword = value;
			},

			// 新密码获得焦点
			onPasswordFocus() {
				this.passwordFocus = true;
				this.confirmFocus = false;
				this.showKeyboard = true;
			},

			// 确认密码获得焦点
			onConfirmFocus() {
				this.confirmFocus = true;
				this.passwordFocus = false;
				this.showKeyboard = true;
			},

			// 密码失去焦点
			onPasswordBlur() {
				this.passwordFocus = false;
			},

			// 确认密码失去焦点
			onConfirmBlur() {
				this.confirmFocus = false;
			},

			// 验证密码
			validatePasswords() {
				if (this.newPassword !== this.confirmPassword) {
					this.passwordError = '两次输入的密码不一致';
					return false;
				} else {
					this.passwordError = '';
					return true;
				}
			},

			// 键盘按键处理
			onKeyPress(key) {
				if (key.text === '⌫') {
					// 删除键
					if (this.passwordFocus && this.newPassword.length > 0) {
						this.newPassword = this.newPassword.slice(0, -1);
					} else if (this.confirmFocus && this.confirmPassword.length > 0) {
						this.confirmPassword = this.confirmPassword.slice(0, -1);
					}
				} else if (key.text && key.text !== '') {
					// 数字键
					if (this.passwordFocus && this.newPassword.length < 6) {
						this.newPassword += key.text;
					} else if (this.confirmFocus && this.confirmPassword.length < 6) {
						this.confirmPassword += key.text;
					}
				}
			},

			// 隐藏键盘
			hideKeyboard() {
				this.showKeyboard = false;
				this.passwordFocus = false;
				this.confirmFocus = false;
			},

			// 确认修改
			confirmModify() {
				if (!this.canConfirm) return;

				// 先验证密码
				if (!this.validatePasswords()) {
					return;
				}

				// 模拟修改成功
				uni.showLoading({
					title: '修改中...'
				});

				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '支付密码修改成功',
						icon: 'success'
					});

					// 返回账户安全页面
					setTimeout(() => {
						uni.navigateBack({
							delta: 2 // 返回两层，跳过身份验证页面
						});
					}, 1500);
				}, 1500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modify-password-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	// 页面标题
	.header {
		background-color: #fff;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #eee;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	// 修改表单
	.modify-form {
		flex: 1;
		background-color: #fff;
		padding: 40rpx;
	}

	// 表单项
	.form-item {
		margin-bottom: 40rpx;

		.form-label {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		.error-tip {
			font-size: 26rpx;
			color: #ff4757;
			margin-top: 20rpx;
			text-align: center;
		}
	}

	// 密码输入区域
	.password-input-wrapper {
		position: relative;
		display: flex;
		justify-content: center;
		padding: 20rpx 0;
		height: 120rpx;
		cursor: pointer;
	}

	// 密码框样式
	.password-boxes {
		display: flex;
		gap: 20rpx;
		z-index: 1;
		
		.box {
			width: 90rpx;
			height: 90rpx;
			border: 2rpx solid #ddd;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 42rpx;
			font-weight: bold;
			background-color: #fff;
			transition: border-color 0.3s;
			
			&.active {
				border-color: #ff4757;
				box-shadow: 0 0 10rpx rgba(255, 71, 87, 0.3);
			}
		}
	}

	// 隐藏的输入框
	.hidden-input {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		opacity: 0 !important;
		z-index: 2 !important;
	}

	// 确定按钮
	.confirm-btn-wrapper {
		margin-top: 80rpx;
	}

	// 键盘容器
	.keyboard-container {
		background-color: #f0f0f0;
		padding: 20rpx;
	}

	// 完成按钮
	.done-btn {
		text-align: right;
		padding: 20rpx 30rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #007aff;
	}

	// 数字键盘
	.keyboard {
		.key-row {
			display: flex;
			margin-bottom: 15rpx;
			justify-content: space-between;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.key-item {
			width: 210rpx;
			height: 110rpx;
			background-color: #fff;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transition: background-color 0.2s;
			cursor: pointer;

			&:active {
				background-color: #e0e0e0;
			}

			.key-text {
				font-size: 42rpx;
				color: #333;
				font-weight: 500;
			}

			.key-sub-text {
				font-size: 20rpx;
				color: #999;
				margin-top: 4rpx;
			}
		}
	}
</style>